<template>
  <div class="chart-container">
    <!-- 商品列表区域 -->
    <div class="goodslist">
      <div class="mui-card" v-for="(item, index) in goodsinfo" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch v-model="$store.getters.getGoodsIsSelected[item.id]" @change="$store.commit('goodsSelectedChanged', item.id)"></mt-switch>
            <img
              :src="item.thumb_path" alt="商品图片"
            >
            <div class="info">
              <h3>{{ item.title }}</h3>
              <p>
                <span class="price">¥{{ item.price }}</span>
                <numbox :max="item.stock_quantity" :count="$store.getters.getgoodscount[item.id]" :goodsid="item.id"></numbox>
                <!-- 问题:如何在渲染的时候就能够拿到goods的数量呢 -->
                <!-- 接口中的数据没有商品的数量,所以goodsinfo中也不会有 -->
                <!-- 只能通过store获取,然后传递给numbox子组件 -->
                <!-- 如何从store中获取呢,getters的方法不能传递id,不能很方便的获取具体的商品的数量 -->
                <!-- 解决思路:让store中的getters返回一个对象,这个对象类似这种格式:{id1:count1,id2:count2},id为key,count为value -->
                <!-- 获取这个对象,然后取对应的id的key对应的value,也就获取了商品的数量了 -->
                <a href="javascript:;" @click.prevent="removeGoods(item.id, index)">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品结算区域 -->
    <div class="goods-settle">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner settle">
              <div class="left">
                  <p>总计（不含运费）</p>
                  <p>已勾选商品&nbsp;<span class="red">{{ $store.getters.getSelectedGoodsAmountAndCount["count"] }}</span>&nbsp;件，总价&nbsp;<span class="red">¥{{ $store.getters.getSelectedGoodsAmountAndCount.amount }}</span> &nbsp;</p>
              </div>
              <mt-button type="danger">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import numbox from "../../subcomponents/chart_numbox.vue";
import qs from "qs";
export default {
  data() {
    return {
      goodsinfo: [] // 用于接收后台返回的goods信息列表
    };
  },
  created() {
    // console.log(this.$store.getters.getgoodsids)
    this.getchartgoodsinfo();
  },
  methods: {
    getchartgoodsinfo() {
      // 获取购物车商品信息
      var goods_idlist = this.$store.getters.getgoodsids;
      if (goods_idlist.length == 0) {
        return;
      }
      this.$http
        .get("api/getchartgoodsinfo/", {
          params: {
            goods_ids: goods_idlist
          },
          paramsSerializer: params => {
            return qs.stringify(params, { indices: false });
          }
        })
        .then(result => {
          if (result.data.status === 0) {
            this.goodsinfo = result.data.message;
          }
        });
    },
    removeGoods(id, index){  // 删除购物车中对应商品
        // 分析:删除的时候,需要删除两处
        // 1. store中购物车数组中的商品  2. goodsinfo数组中的商品,为了删除商品,可以提供索引方便删除
        // 先删除goodsinfo数组中对应id的商品
        this.goodsinfo.splice(index, 1)
        // 调用mutations中的方法删除指定id的商品
        this.$store.commit("removeGoodsById", id)
    }
  },
  components: {
    numbox
  }
};
</script>
<style lang="scss" scoped>
.chart-container {
  background-color: #eee;
  overflow: hidden;
  .goodslist {
    .mui-card-content-inner {
      display: flex; // 横向排
      align-items: center; // 纵向居中
    }
    img {
      width: 60px;
      height: 60px;
      object-fit: cover;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      a {
        margin-left: 5px;
      }
    }

    h3 {
      font-size: 13px;
      margin: 0px;
      margin-bottom: 10px;
    }
    p {
      margin: 0;
    }
    .price {
      color: red;
      font-weight: bold;
    }
  }
  .settle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .red{
          color: red;
          font-weight: bold;
          font-size: 16px;
      }
  }
}
</style>
